<template>
  <div class="personalCenter-container">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <!-- 查询 start -->
    <el-card
      :body-style="{ padding: '20px 30px' }"
      :style="{ position: 'relative' }"
    >
      <div slot="header" class="clearfix">
        <span>查询条件</span>
      </div>
      <el-form
        ref="backPemForm"
        :inline="true"
        :model="emsFindQueryForm"
        class="demo-form-inline"
      >
        <el-form-item label="企业名称" prop="nameKeyword">
          <el-input
            v-model="emsFindQueryForm.nameKeyword"
            placeholder="企业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业状态" prop="enabled">
          <el-select
            v-model="emsFindQueryForm.enabled"
            clearable
            placeholder="请选择"
          >
            <el-option label="启用" :value="true"></el-option>
            <el-option label="禁用" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="checkTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            style="background-color: #1074fd;color: #ffffff;border: 0"
            icon="el-icon-search"
            @click="queryEmsInfoSubmit"
            >查询</el-button
          >
          <el-button
            plain
            style="color: #999999"
            @click="resetFrom('backPemForm')"
            >清空条件</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 查询 end -->

    <!-- 列表 start -->
    <el-card :body-style="{ padding: '20px 30px' }" style="margin-top: 20px;">
      <div class="ems_list"  style="position:relative;">
        <div class="title_detail">
          企业列表
        </div>
        <div class="panel-body">
          <div class="widget-list list-left-element">
            <ul class="list" style="height: 500px;position:relative;">
              <li
                v-for="(item, index) in ems_list"
                :key="item.id"
                style="position: relative;"
                :class="currentItemIndex === index ? 'current' : ''"
                @click="emsInfoClick(item, index)"
              >
                <div class="text">
                  <span class="title">{{ item.organName }}</span>
                  <div style="display: flex">
                    <span class="title1" style="color: rgb(66, 190, 255)">{{
                      item.usedNum
                    }}</span>
                    <span class="title1">{{
                      item.totalNum - item.usedNum
                    }}</span>
                  </div>
                </div>
                <div class="text" style="position: absolute; right: 5px;">
                  <span class="title">{{ item.totalNum }}</span>
                  <div style="display: flex;justify-content: flex-end">
                    <span
                      class="title1"
                      style="color: rgb(66, 190, 255)"
                      v-if="item.baned"
                      >启用</span
                    >
                    <span
                      class="title1"
                      style="color: #FF2F56"
                      v-else-if="!item.baned"
                      >禁用</span
                    >
                  </div>
                </div>
              </li>
              <li v-if="ems_list.length === 0" class="list-nodata">
                <div class="title">暂无数据</div>
              </li>
            </ul>
          </div>
        </div>

        <div style="position: absolute;bottom: 10px">
          <el-pagination
            :page-size="6"
            :pager-count="5"
            layout="total, prev, pager, next"
            :total="emstotal"
            @prev-click="paginationPrevClick"
            @next-click="paginationNextClick"
            @current-change="paginationNextChange"
          ></el-pagination>
        </div>
      </div>
      <div class="oem_detail">
        <div class="title_detail">
          <div class="button_detail">
            企业详情
          </div>
        </div>
        <el-tabs
          v-model="activeName"
          :style="{ margin: '20px' }"
          @tab-click="tabChange"
          v-if="isemsinfo"
        >
          <el-tab-pane label="基础信息" name="userInfo">
            <div class="detail_mes">
              <div class="messages1">企业编号：{{ emsinfo.code }}</div>
              <div class="messages">企业账号：{{ emsinfo.userName }}</div>
              <div class="messages">企业名称：{{ emsinfo.organName }}</div>
              <div class="messages">企业状态：{{ emsinfo.enabled }}</div>
              <div class="messages">上级：{{ emsinfo.parentOrganName }}</div>
            </div>
            <div class="detail_mes">
              <div class="messages">授权控数：{{ emsinfo.totalNum }}</div>
              <br />
              <div class="messages">已使用：{{ emsinfo.usedNum }}</div>
            </div>
            <div>
              <div class="messages1">创建时间：{{ emsinfo.createTime }}</div>
              <div class="messages1">备注：{{ emsinfo.remark }}</div>
              <div class="messages1">到期时间：{{ emsinfo.expires }}</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="授权总数明细" name="authDetail">
            <div>
              <el-form
                :inline="true"
                :model="authDetailPage"
                class="demo-form-inline"
              >
                <div
                  style="display: flex;flex-direction: row;justify-content: space-between"
                >
                  <div>
                    <el-date-picker
                      v-model="checkTime"
                      type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                  </div>
                  <!--                  <el-form-item style="margin-left: 10px">-->
                  <!--                    <el-input v-model="authDetailPage.remarkKeyword" placeholder="备注"></el-input>-->
                  <!--                  </el-form-item>-->
                  <el-form-item>
                    <el-button
                      style="background-color: #1074fd;color: #ffffff;border: 0"
                      icon="el-icon-search"
                      @click="getAuthInfo"
                      >查询</el-button
                    >
                  </el-form-item>
                </div>
              </el-form>
              <el-table
                ref="RoutineTable"
                border
                :data="authDetail"
                tooltip-effect="dark"
                max-height="320px"
                style="font-size: 12px;"
              >
                <el-table-column prop="createTime" label="变更时间">
                  <template slot-scope="scope">
                    <span>{{ formDate(scope.row.createTime) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="types" label="事项"></el-table-column>
                <el-table-column
                  prop="counts"
                  label="数量变动"
                ></el-table-column>
                <el-table-column prop="used" label="已使用"></el-table-column>
                <el-table-column
                  prop="total"
                  label="总授权数"
                ></el-table-column>
                <!--                <el-table-column-->
                <!--                  prop="remark"-->
                <!--                  label="备注"-->
                <!--                ></el-table-column>-->
              </el-table>
            </div>
            <div class="table_bottom">
              <div class="table_pages">
                <el-pagination
                  :page-sizes="[10, 15, 20, 25, 30]"
                  :current-page="authDetailPage.pageNum"
                  :page-size="authDetailPage.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="authDetailtotal"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                ></el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <!-- 列表 end -->
  </div>
</template>

<script>
import ModuleTitle from "@/components/content/ModuleTitle.vue";

import { mapState } from "vuex";
import API from "@/network/api/omsApi";
import moment from "moment";
import { createSign } from "@/utils/sign";

export default {
  name: "index",
  data() {
    return {
      moduleTitle: "企业管理",
      isemsinfo: false,
      isNull: false,
      currentUserInfo: {},
      currentItemIndex: 0,
      editEmsDialig: false,
      emsinfo: {},
      checkTime: [],
      ems_list: [],
      emstotal: 0,
      activeName: "userInfo",
      region: "",
      authDetail: [],
      authDetailtotal: 0,
      value1: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        }
      },
      filterForm: {
        organStatus: "",
        username: "",
        pageNum: 1,
        pageSize: 10
      },
      pageTotal: 0,
      CurrentIndex: 0,
      impower: {
        telephone: "",
        organStatus: ""
      },
      emsListPages: {
        pageNum: 1,
        pageSize: 6
      },
      emsFindQueryForm: {
        nameKeyword: "", // 机构名称关键字
        organCodeN: "", // 需要查询的机构的code
        enabled: "",
        createTimeQ: "",
        createTimeH: ""
      },
      listQueryForm: {
        organCode: "",
        type: "EMS" // OMS查询管理的贴牌，PMS查询管理的企业,EMS查询管理的企业
      },
      emsQueryDetail: {
        organId: 0 // 机构id
      },
      AgentNum: {
        telephone: "",
        addAgentNum: ""
      },
      requestParam: {
        organId: 0, // 机构id
        currentOrganId: 0, // 操作人员id
        enabled: ""
      },
      authDetailPage: {
        operatorOrganId: 0,
        remarkKeyword: "",
        createTimeQ: "",
        createTimeH: "",
        pageNum: 1,
        pageSize: 10
      },
      publicForm: {
        timestamp: ""
      }
    };
  },
  computed: {
    ...mapState(["oemUserInfo"])
  },
  watch: {
    "emsinfo.id"() {
      if (this.emsinfo.id) {
        // this.requestParam.oemId = this.emsinfo.id
        this.authDetailPage.operatorOrganId = this.emsinfo.id;
      }
    },
    checkTime() {
      if (this.checkTime === null) {
        this.checkTime = [];
      }
      if (this.checkTime.length !== 0) {
        this.emsFindQueryForm.createTimeQ = Number(
          moment(this.checkTime[0].getTime()).format("x")
        );
        this.emsFindQueryForm.createTimeH = Number(
          moment(this.checkTime[1].getTime()).format("x")
        );
        this.authDetailPage.createTimeQ = Number(
          moment(this.checkTime[0].getTime()).format("x")
        );
        this.authDetailPage.createTimeH = Number(
          moment(this.checkTime[1].getTime()).format("x")
        );
      } else {
        this.emsFindQueryForm.createTimeQ = "";
        this.emsFindQueryForm.createTimeH = "";
        this.authDetailPage.createTimeQ = "";
        this.authDetailPage.createTimeH = "";
      }
    }
  },
  created() {
    this.currentUserInfo = JSON.parse(localStorage.getItem("updateUserInfo"));
    this.getOem();
  },
  mounted() {},
  methods: {
    formDate(createTime) {
      createTime = this.$moment(createTime).format("YYYY-MM-DD HH:mm:ss");
      return createTime;
    },
    // 机构的条件查询
    queryEmsInfoSubmit() {
      if (this.emsFindQueryForm.createTimeQ === "") {
        delete this.emsFindQueryForm.createTimeQ;
      }
      if (this.emsFindQueryForm.createTimeH === "") {
        delete this.emsFindQueryForm.createTimeH;
      }
      if (this.emsFindQueryForm.enabled === "") {
        delete this.emsFindQueryForm.enabled;
      } else {
        this.emsFindQueryForm.enabled = Boolean(this.emsFindQueryForm.enabled);
      }
      this.listQueryForm.organCode = this.currentUserInfo.organCode;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.emsFindQueryForm,
          ...this.emsListPages,
          ...this.listQueryForm,
          ...this.publicForm
        })
      );
      API.getList({
        ...this.emsFindQueryForm,
        ...this.emsListPages,
        ...this.listQueryForm,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          // console.log(res.data.data.records.length)
          if (res.data.data.records.length !== 0) {
            const Emsdata = res.data.data;
            this.emstotal = Emsdata.total;
            this.ems_list = Emsdata.records;
            this.emsInfoClick(this.ems_list[this.currentItemIndex]);
            this.isNull = true;
          } else {
            this.emstotal = 0;
            this.ems_list.length = 0;
            this.isNull = false;
            this.isemsinfo = false;
          }
          // console.log(this.oem_list.length)
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    },
    resetFrom(refName) {
      this.$refs[refName].resetFields();
    },
    paginationPrevClick(page) {
      this.emsListPages.pageNum = page;
      this.getOem();
    },
    paginationNextClick(page) {
      this.emsListPages.pageNum = page;
      this.getOem();
    },
    paginationNextChange(page) {
      this.emsListPages.pageNum = page;
      this.getOem();
    },
    handleSizeChange(val) {
      this.authDetailPage.pageSize = val;
      this.getAuthInfo();
    },
    handleCurrentChange(val) {
      this.authDetailPage.pageNum = val;
      this.getAuthInfo();
    },
    // 查询企业列表
    async getOem() {
      this.listQueryForm.organCode = this.currentUserInfo.organCode;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.emsListPages,
          ...this.listQueryForm,
          ...this.publicForm
        })
      );
      API.getOemList({
        ...this.emsListPages,
        ...this.listQueryForm,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          // console.log(res.data.data.records.length)
          if (res.data.data.records.length !== 0) {
            const Emsdata = res.data.data;
            this.emstotal = Emsdata.total;
            this.ems_list = Emsdata.records;
            this.emsInfoClick(this.ems_list[this.currentItemIndex]);
            this.isNull = true;
          } else {
            this.emstotal = 0;
            this.ems_list.length = 0;
            this.isNull = false;
            this.isemsinfo = false;
          }
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    },
    tabChange(val) {
      if (val.paneName === "authDetail") {
        this.getAuthInfo();
      }
    },
    // 查询授权日志明细
    async getAuthInfo() {
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      if (this.authDetailPage.createTimeH === "") {
        delete this.authDetailPage.createTimeH;
      }
      if (this.authDetailPage.createTimeQ === "") {
        delete this.authDetailPage.createTimeQ;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({ ...this.authDetailPage, ...this.publicForm })
      );
      API.getAuthDetail({ ...this.authDetailPage, ...this.publicForm }).then(
        res => {
          if (res.data.code === 0) {
            const authDetail = res.data.data;
            this.authDetail = authDetail.records;
            this.authDetailtotal = authDetail.total;
          } else {
            this.$message({
              type: "warning",
              message: res.data.msg
            });
          }
        }
      );
    },
    // 查询企业基础信息
    emsInfoClick(item, index) {
      if (index !== undefined) {
        this.currentItemIndex = index;
      }
      this.emsQueryDetail.organId = item.organId;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({ ...this.emsQueryDetail, ...this.publicForm })
      );
      API.getListDetail({
        ...this.emsQueryDetail,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          const result = res.data.data;
          this.emsinfo = result;
          this.emsinfo.code = result.organCode.split("_")[3];
          this.emsinfo.createTime = this.$moment(result.createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          if (result.remark === "") {
            this.emsinfo.remark = "无";
          } else {
            this.emsinfo.remark = result.remark;
          }
          if (!result.enabled) {
            this.emsinfo.enabled = "禁用";
            this.emsinfo.organStatus = true;
          } else {
            this.emsinfo.enabled = "启用";
            this.emsinfo.organStatus = false;
          }
          this.emsinfo.id = item.organId;
          this.activeName = "userInfo";
          this.isemsinfo = true;
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    }
  },
  components: {
    ModuleTitle
  }
};
</script>
<style scoped>
* {
  box-sizing: content-box;
}
.current {
  background-color: #1074fd;
  color: #ffffff;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

.list {
  height: 100px;
  padding: 0px 20px 30px 20px !important;
  overflow: hidden;
  margin: 0 !important;
}

.title {
  display: block;
  margin: 5px;
}
.title1 {
  display: block;
  margin: 5px;
  font-size: 12px;
}

.list li {
  display: flex;
  padding: 8px;
  margin-bottom: 5px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.ems_list {
  display: inline-block;
  width: 35%;
  height: 600px;
  margin: 20px 10px 20px 0;
  vertical-align: top;
  border: 1px #bbb solid;
  border-radius: 10px;
  position: relative;
}

.oem_detail {
  display: inline-block;
  width: 60%;
  height: 600px;
  margin: 20px 0 20px 10px;
  border: 1px #bbb solid;
  border-radius: 10px;
}

.title_detail {
  height: 10%;
  padding: 0 20px;
  margin: 0 0 20px 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #d9d9d9;
  border-bottom: 1px #bbb solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail_mes {
  border-bottom: 1px #e5e5e5 solid;
}

.messages {
  display: inline-block;
  width: 40%;
  margin: 11px;
  color: #666666;
}
.messages1 {
  display: inline-block;
  width: 80%;
  margin: 11px;
  color: #666666;
}

.table_bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 25px 10px 0 10px;
}

.table_all {
  display: flex;
  margin-left: 10px;

  span {
    margin-left: 20px;
    font-size: 14px;
    color: #60b5a1;
    cursor: pointer;
  }
}
.verticalBar {
  width: 3px;
  height: 18px;
  background: #1074fd;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  margin-top: 2px;
}
/*样式无法修改时  用 /deep/ 或 ::v-deep 操作符取而代之*/
/deep/ .el-tabs__item.is-active {
  color: #1074fd;
}
/deep/ .el-tabs__item:hover {
  color: #1074fd;
  cursor: pointer;
}
/deep/ .el-tabs__active-bar {
  background-color: #1074fd;
}
/deep/ .el-table th {
  overflow: hidden;
  background-color: #d9d9d9;
  color: #888888;
}
/deep/ .el-dialog__header {
  background-color: #d9d9d9;
}
</style>
